<template>
  <el-form :model="cloudForm" class="cloudForm">
    <el-form-item>
      <el-col :span="2">
        <span>{{ cloudForm.name }}</span>
      </el-col>
      <el-col :span="1" style="padding-left: 0">
        <span>配送</span>
      </el-col>
      <el-col :span="4">
        <el-select v-model="cloudForm.deliveryExpressId" placeholder="请选择" :disabled="disabled">
          <el-option
            label="顺丰"
            value="0"
          >
            顺丰
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          ref="freightId"
          v-model="cloudForm.modelDeliveryId"
          :disabled="disabled"
          class="margin-left"
          placeholder="选择运费模板"
          @focus="showDialogYF(0,0)"
        >
          <el-option
            v-for="item in YFOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>

      <el-col v-if="isRecovery==0" :span="2" class="el-col-offset-1">
        <span>售后取回</span>
      </el-col>
      <el-col v-if="isRecovery==0" :span="4">
        <el-select v-model="cloudForm.recoveryExpressId" placeholder="请选择" :disabled="disabled">
          <el-option
            label="顺丰"
            value="0"
            selected
          >
            顺丰
          </el-option>
        </el-select>
      </el-col>
      <el-col v-if="isRecovery==0" :span="4">
        <el-select
          ref="freightId"
          v-model="cloudForm.modelRecoveryId"
          :disabled="disabled"
          class="margin-left"
          placeholder="选择运费模板"
          @focus="showDialogYF(0,1)"
        >
          <el-option
            v-for="item in YFOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </el-form-item>
    <AddExpressModel
      ref="AddExpressModel"
      :visible="cloudStoreVisible"
      @getYFList="getYFOptions"
      @getYFCityList="getYFCityOptions"
      @getSelectYFModel="getSelectYFModel"
      @handelClose="handelCloudStoreClose"
    />
  </el-form>
</template>

<script>
import AddExpressModel from '@/components/AddExpressModel'
import { freightTemplateList } from '@/views/shop/api/FreightTemplate'

export default {
  name: 'CloudStoreExpressModel',
  components: { AddExpressModel },
  props: {
    cloudStore: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      cloudForm: {
        id: null,
        name: null,
        deliveryExpressId: '0',
        modelDeliveryId: null,
        recoveryExpressId: '0',
        modelRecoveryId: null
      },
      expressType: null,
      cloudStoreVisible: false,
      YFOptions: [],
      YFCityOptions: [],
      isRecovery: 0,
      disabled: false
    }
  },
  created() {
    this.cloudForm.id = this.cloudStore.id
    this.cloudForm.name = this.cloudStore.name
  },
  methods: {
    showDialogYF(number, type) {
      this.cloudStoreVisible = true
      this.expressType = type
      this.$refs.AddExpressModel.setYFType(number)
      this.$refs.AddExpressModel.resetYF()
    },
    changeDisabled(disabled) {
      this.disabled = disabled
    },
    getYFOptions(list) {
      this.YFOptions = list
    },
    getYFCityOptions(list) {
      this.YFCityOptions = list
    },
    getSelectYFModel(data) {
      console.log(this.expressType)
      if (this.expressType == 0) {
        this.cloudForm.modelDeliveryId = data.id
      } else if (this.expressType == 1) {
        this.cloudForm.modelRecoveryId = data.id
      }
    },
    handelCloudStoreClose() {
      this.cloudStoreVisible = false
    },
    setIsRecovery(number) {
      this.isRecovery = number
    },
    setData(list) {
      if (list.length > 0) {
        list.forEach(item => {
          if (item.id == this.cloudStore.id) {
            console.log(this.YFOptions)
            const data = {
              shopId: localStorage.getItem('shopId'),
              type: 0,
              page: 1,
              limit: 0
            }
            freightTemplateList(data).then(res => {
              this.YFOptions = []
              res.data.data.data.forEach(item => {
                this.YFOptions.push({
                  value: item.id,
                  label: item.name
                })
              })
              this.cloudForm.modelDeliveryId = item.modelDeliveryId
              this.cloudForm.deliveryExpressId = item.deliveryExpressId
              if (item.modelRecoveryId) {
                this.cloudForm.modelRecoveryId = item.modelRecoveryId
                this.cloudForm.recoveryExpressId = item.recoveryExpressId
              }
            })
          }
        })
      }
    },
    getData() {
      if (!this.cloudForm.deliveryExpressId) {
        this.$message.error('请选择配送物流公司')
      }
      if (!this.cloudForm.deliveryExpressId) {
        return this.$message.error('请选择配送运费模板')
      }
      if (this.isRecovery == 0) {
        if (!this.cloudForm.recoveryExpressId) {
          return this.$message.error('请选择取回物流公司')
        }
        if (!this.cloudForm.modelRecoveryId) {
          return this.$message.error('请选择取回运费模板')
        }
      }
      const data = this.$XEUtils.clone(this.cloudForm, true)
      delete data.name
      if (this.isRecovery == 1) {
        delete data.recoveryExpressId
        delete data.modelRecoveryId
      }
      return data
    }
  }
}
</script>

<style lang="scss" scoped>
.cloudForm {
  .el-form-item__content {
    margin-left: 0;
  }
}
</style>
